<style scoped>
  .layout{
    /*border: 1px solid #d7dde4;*/
    background: #fff;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .dev-head{
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
    background: #fff;
    z-index:100;
  }
  .ivu-menu-horizontal{
    height: 64px;
    line-height: 64px;
  }
  .logo{
    width: 140px;
    height: 40px;
    float: left;
    position: relative;
    top: 12px;
    /*left: 10px;*/
  }
  .layout-nav{
    width: 86%;
    margin: 0 auto;
    margin-left:140px;
    height: 100%;
    /*margin-right: 20px;*/

  }
  .contentD{
    /*margin: 80px 20px 0;*/
    /*background: #fff;*/
    margin-top: 66px;
    minHeight: 100%;
    margin-left: 10%;
    margin-right: 6%;
    margin-bottom: 40px;
  }
  .layout-footer-center{
    text-align: center;
    position: fixed;
    width:100%;
    height:24px;
    bottom: 0;
  }
  .header-avator-con {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 200px;
  }
  .head-right{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 120px;
  }
  .head-right a{
    padding:0 5px;
  }
  .user-dropdown-menu-con {
    position: absolute;
    right: -36px;
    top: 0;
    width: 260px;
    height: 100%;
  }
  .main-user-name{
    display: inline-block;
    width: 110px;
    word-break: keep-all;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  .user-dropdown-innercon{
     height: 100%;
     padding-right: 18px;
   }

</style>
<template>
  <div class="layout">
    <Layout>
      <Header :style="{position: 'fixed', width: '100%'}" class="dev-head">
        <Menu mode="horizontal" theme="light">
          <div>
            <a href="/#/home"><img src="../assets/img/laison.png" alt="" class="logo"></a>
          </div>
          <div class="layout-nav">
            <MenuItem name="1" to="/art/index">
              <Icon type="ios-navigate"></Icon>
              文章
            </MenuItem>
            <MenuItem name="2" to="/msg/index">
              <Icon type="ios-keypad"></Icon>
              留言
            </MenuItem>
            <MenuItem name="3" to="/fb/index">
              <Icon type="ios-analytics"></Icon>
              用户反馈
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>
              其他
            </MenuItem>
          </div>
          <div class="head-right">
            <a href="/#/login">登录</a>
            <a href="/#/reg">注册</a>
            <div style="float: right;">
              <!--国际化切换-->
              <lang-nav></lang-nav>
            </div>
          </div>
        </Menu>
      </Header>
      <Content class="contentD">
        <router-view></router-view>
      </Content>
      <Footer class="layout-footer-center">2017 - {{currentYear}} &copy; </Footer>
    </Layout>

  </div>
</template>
<script>
  import util from '../libs/util';
  import langNav from './main/lang-nav'
  export default {
    components: {
      langNav
    },
    data () {
      return {
        userName: '',
        menuLists:[],
        openedSubmenuArr: this.$store.state.app.openedSubmenuArr,
        currentYear:2019,
        activeName:''
      };
    },
    computed: {
      menuList () {
        return this.$store.state.app.menuList;
      },
      pageTagsList () {
        return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
      },
      currentPath () {
        // console.log(this.$store.state.app.currentPath)
        return this.$store.state.app.currentPath; // 当前面包屑数组
      }
    },
    methods: {
      init () {
        var username_orders = Base64.encode('username_orders')
        this.userName = Base64.decode(window.sessionStorage.getItem(username_orders));
        let pathArr = util.setCurrentPath(this, this.$route.name);
        this.activeName = this.$route.name
        this.$store.commit('updateMenulist');
        // console.log(pathArr)
        if (pathArr.length > 2) {
          this.$store.commit('addOpenSubmenu', pathArr[2].name);
        }else if(pathArr.length > 1){
          this.$store.commit('addOpenSubmenu', pathArr[1].name);
        }else if(pathArr.length == 1){
          this.$store.commit('addOpenSubmenu', pathArr[0].name);
        }
      },
      changeLanguage(name){
        // 后台同步
        if((name === 'en') && (window.localStorage.language !== 'en')){
          this.changeLang('en_US')
        }else if((name === 'zh') && (window.localStorage.language !== 'zh')){
          this.changeLang('zh_CN')
        }
      },
      changeLang(language){
        // 国际化语言切换
        if(language == 'en_US'){
          window.localStorage.language = 'en'
        }else{
          window.localStorage.language = 'zh'
        }
      },
      handleClickUserDropdown (name) {
        if (name === 'ownSpace') {
          // util.openNewPage(this, 'home_index');
          this.$router.push({
            name: 'home_index'
          });
        } else if (name === 'logout') {
          // 退出登录
          this.logOut();
        }
      },
      logOut(){
        window.sessionStorage.clear()
        window.localStorage.clear()
        localStorage.clear()
        this.$store.commit('clearOpenedSubmenu');
        this.$router.push({
          name: 'Login'
        });
      },
      handleTitle:function (title) {
        if (typeof title === 'object') {
          return this.$t(title.i18n);
        } else {
          return title;
        }
      },
      showRegister(){
        this.registerModal = true

      }
    },
    watch:{
      '$route' (to) {
        this.$store.commit('setCurrentPageName', to.name);
        let pathArr = util.setCurrentPath(this, to.name);
        if (pathArr.length > 2) {
          this.$store.commit('addOpenSubmenu', pathArr[2].name);
        }else if(pathArr.length > 1){
          this.$store.commit('addOpenSubmenu', pathArr[1].name);
        }else if(pathArr.length == 1){
          this.$store.commit('addOpenSubmenu', pathArr[0].name);
        }
        // this.checkTag(to.name);
        localStorage.currentPageName = to.name;
      },
      lang () {
        util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
      }
    },
    mounted () {
      this.init();
    },
    created () {
      // 显示打开的页面的列表
      this.$store.commit('setOpenedList');
      // 当前年
      var currentY = new Date()
      this.currentYear = currentY.getFullYear()

    }
  }
</script>
